我们在日常运输代码的时候，时常因为代码过于混乱而导致时间长了代码多了之后难以搬运，即便是老司机都得打起十二分精神，比如类似于下面这样的代码（大家一眼划过就行了）：
$(document).ready(function(){ if (!getCookie("showNotice")) { setCookie("showNotice", "1",1); document.querySelector(".shadowBg").style.display = "flex"; document.querySelector(".new_year_notice span").addEventListener('click', function () { document.querySelector(".shadowBg").style.display = "none"; }); } var newBanner = mcBanner(); newBanner.switchBanner('mcBannerBox', '.mcBannerChild', '.bannerDotBox', 5000); sliderBox({ id: document.getElementById('dynamic-list'), direction: 'top', intervalTime: 5000 }); sliderBox({ id: document.getElementById('honor-box'), direction: 'left', intervalTime: 6000, clickLeft: document.getElementById('honor-box-left'), clickRight: document.getElementById('honor-box-right') }); let _countTo = document.querySelectorAll('.countTo'), _countTo_len = _countTo.length; for (let i=0; i < _countTo_len; i++) { countTo({ id: _countTo[i], }); } slideWord(document.getElementById('slideHonor')); $.ajax({ url:'/payusercount', type:'GET', dataType:'json', success:function(data){ var _box = document.getElementById("box"); for (var i = 0; i < data.length; i++) { _box.innerHTML += " '; strBottom += '
"; str += data.articleLists[newitem][articleItem].name str += "
"; }; temStr = strHead + str + strBottom; artStr += temStr }; $('.e-artical').append(artStr); } })复制代码这段代码好像还挺长的，其实仅仅是冰山一角。一个项目中如果都是这样的代码，基本可以说是废了，因为项目在日常不断的迭代当中，我们就只能不断地堆积代码，不断地让整个项目更加的混乱和臃肿。
另外不得不说的是，现在很多小伙伴都会用框架来开发项目，但是，请记住，只要你对自己有有足够的信心足够的随意，你依然可以写出很混乱的代码，相信我，真的！
下面献上整理过后的代码，相关的解释直接穿插到代码相应位置的注释中，方便理解
$(document).ready(function(){ var thisPageThings = (function () { /*这外面可以写可以在下面的对象的方法中 多次利用的函数，在这里也可以认为是私有函数 */ return { /*每次增加相关代码，请在对象里面新建方法， 把新增的代码写在新建的代码里面，统一管理所有碎片代码， 把混乱的代码切割为一块块的碎片*/ addBan: function () { $('.addBan').click(function () { var id = $(this).data('id'); $.ajax({ url:'/addclick', type:'GET', data:{ 'id':id}, success:function(res){ console.log(res); } }) }); }, onceModal: function () { var res = document.cookie.indexOf("first_visit"); if(res == -1){ var exp =new Date(); console.log(exp.getTime()); exp.setTime(exp.getTime() + (21 - exp.getHours()) * 60 * 60 * 1000); //提前一小时吧 document.cookie ="first_visit=1;expires=" + exp.toGMTString(); //5秒测试 document.querySelector(".shadowBg").style.display = "flex"; document.querySelector(".new_year_notice span").addEventListener('click', function () { document.querySelector(".shadowBg").style.display = "none"; }); } }, mcBannerBox: function () { $('.mcBannerChild').length > 1 && (function () { var newBanner = mcBanner(); newBanner.switchBanner('mcBannerBox', '.mcBannerChild', '.bannerDotBox', 5000); }()); }, dynamicList: function () { $('#dynamic-list').children().length && sliderBox({ id: document.getElementById('dynamic-list'), direction: 'top', intervalTime: 5000 }); }, honorBox: function () { $('#honor-box').children().length && sliderBox({ id: document.getElementById('honor-box'), direction: 'left', intervalTime: 6000, clickLeft: document.getElementById('honor-box-left'), clickRight: document.getElementById('honor-box-right') }); }, slideHonor: function () { slideWord(document.getElementById('slideHonor')); }, payusercountAjax: function () { var _this = this; $.ajax({ url:'/payusercount', type:'GET', dataType:'json', success:function(data){ _this.event.publish('payusercountAjax', data); } }); }, platformAjax: function () { var _this = this; $.ajax({ url:'/platform', type:'GET', dataType:'json', success:function(data){ _this.event.publish('platformAjax', data); } }) }, categoryAjax: function () { var _this = this; $.ajax({ url:'/news/category', type:'GET', dataType:'json', success:function(data){ _this.event.publish('categoryAjax', data); } }) }, //此处放置所有的订阅 allSubscription: function () { this.event.subscribe('payusercountAjax', function (data) { var _box = document.getElementById("box"); for (var i = 0; i < data.length; i++) { _box.innerHTML += " '; strBottom += '
"; str += data.articleLists[newitem][articleItem].name; str += "
"; } temStr = strHead + str + strBottom; artStr += temStr } $('.e-artical').append(artStr); }); } }; }()); //此处为上面自执行代码的相关配置,如果需要组织代码比如说一些设计模式 (function () { //发布和订阅的方法模板,这里其实就是一个发布订阅模式 var event = { clientList: [], subscribe: function (key, fn) { if (!this.clientList[key]) { this.clientList[key] =[]; } this.clientList[key].push(fn); }, publish: function () { var key = Array.prototype.shift.call( arguments ), fns = this.clientList[ key ]; if ( !fns || fns.length === 0 ) { return false; } for ( var i = 0, fn; fn = fns[ i++ ]; ) { fn.apply( this, arguments); } } }; //将发布订阅的方法集成到要使用的对象中 var installEvent = function (obj) { obj[ 'event' ] = event; }; installEvent( thisPageThings ); //统一执行所有的代码碎片 for (var thing in thisPageThings) { typeof thisPageThings[thing] === 'function' && thisPageThings[thing](); } }()); });复制代码从一开始就让代码结构化是很有好处的，一方面提高可读性，另一方面为以后的扩展提供了想象空间，比如自执行的相关配置可以整理出一个公用文件，方便随处可用；就算只有单个地方会用到，这么个结构就很方便我们做到DRY——don't repeat yourself！